<template>
   <el-popover :visible="visible" placement="top" :width="width">
    <p>{{infoText}}</p>
    <div style="text-align: right; margin: 0">
      <el-button size="small" text @click="visible = false">取消</el-button>
      <el-button size="small" type="primary" @click="confirmClick"
        >{{confirmText}}</el-button
      >
    </div>
    <template #reference>
      <el-button :style="customWidthStyle == '' ? '':{width:customWidthStyle}" :type="buttonType" :size="size" :text="isText" @click="visible = true" :bg="isBg">{{text}}</el-button>
    </template>
  </el-popover>
</template> 
    
<script setup lang='ts'>
import { ref } from 'vue'

const props = defineProps({
  infoText: {
    type: String,
    default: "确定删除？"
  },
  width: {
    type: Number,
    default: 160
  },
  confirmText: {
    type: String,
    default: "确定"
  },
  text: {
    type: String,
    default: "删除"
  },

  buttonType: {
    type:String,
    default:"danger"
  },

  isText: {
    type:Boolean,
    default:false
  },

  isBg: {
    type:Boolean,
    default:false
  },

  size: {
    type:String,
    default:"small"
  },
  customWidthStyle: {
    type:String,
    default:""
  }
})

const emit = defineEmits(['hanldeConfirm'])

const visible = ref(false)

const confirmClick = (item:any) => {
    emit("hanldeConfirm", item)
    visible.value = false
}
</script>
    
<style scoped>
    
</style>